<template>
	<view>
		<view class="content">
			<view class="reservationList">
				<view class="reservationBox" v-for="(item,index) in reservationList" :key="item.id" @click="gotoReservationInfo(item.id)">
					<view class="orderNo boos">
						<span class="span1">预约单号: </span>  <span class="span2">{{item.orderNo}} </span>
					</view>
					<view class="type boos">
						<span class="span1">{{item.type==1?'专家诊':'普通诊'}}: </span> <span class="span2">{{item.categoryName}}</span>
					</view>
					<view class="patientName boos">
						<span class="span1">患者姓名: </span> <span class="span2">{{item.patientName}}</span>
					</view>
					<view class="userId boos">
						<span class="span1">患者ID: </span> <span class="span2">{{item.userId}}</span>
					</view>
					<view class="reserveTime boos">
						<span class="span1">预约时间: </span> <span class="span2">{{item.reserveTime}}</span>
					</view>
					<view class="money boos">
						<span class="span1">金额: </span> <span class="span2">¥{{(item.money-0).toFixed(2)}}</span>
					</view>
					
				</view>
				<Pagination 
				:alwaysShowArrow="true"
				:total="total"
				:pageSize="pageSize"
				:nowPage="nowPage"
				@change="change">
				</Pagination>
				<view class="nowPage">
					{{`当前在第${nowPage}页`}}
				</view> 
				<view class="foot">
					
				</view>
			</view>
			<!-- 预约详情遮罩层 -->
			<view class="infoBox" v-if="show" @click="show=false">
				<view class="warp" @tap.stop>
					<view class="orderNo boos">
						<span class="span1">预约单号: </span>  <span class="span2">{{reservationInfo.orderNo}} </span>
					</view>
					<view class="type boos">
						<span class="span1">{{reservationInfo.type==1?'专家诊':'普通诊'}}: </span> <span class="span2">{{reservationInfo.categoryName}}</span>
					</view>
					<view class="patientName boos">
						<span class="span1">患者姓名: </span> <span class="span2">{{reservationInfo.patientName}}</span>
					</view>
					<view class="userId boos">
						<span class="span1">患者ID: </span> <span class="span2">{{reservationInfo.userId}}</span>
					</view>
					<view class="reserveTime boos">
						<span class="span1">预约时间: </span> <span class="span2">{{reservationInfo.reserveTime}}</span>
					</view>
					<view class="money boos">
						<span class="span1">金额: </span> <span class="span2">¥{{(reservationInfo.money-0).toFixed(2)}}</span>
					</view>
					<view class="btn boos">
						<button @click="show=false">退出查看</button>
					</view>
				</view>
				
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	import Pagination from "@/components/bwm-pagination/bwm-pagination.vue"
	import {getReservationList,getReservation} from '../../../api/hospitalApi.js'
	import {mockReservationList,mockReservation} from '../../../mock/hospital.js';
	export default {
		components: {
		    Pagination
		},
		data() {
			return {
				total: 0,
				pageSize: 10,
				nowPage: 1,
				reservationList:[],
				reservationInfo:{},
				show:false
			}
		},
		methods: {
			// 阻止事件冒泡
			handleTap(event) {
			    // 处理点击事件
			    // 阻止事件冒泡
			    event.stopPropagation();
			  },
			
			// 去预约详情
			gotoReservationInfo(id){
				this.show = true;
				console.log("show::",this.show);
				console.log("id:==>",id);
				this.getReservationInfo(id)
				
			},
			// 获取预约列表
			async loadData(data){
				let res = await getReservationList(data);
				console.log("res:",res);
				if(res.code == 200){
					this.total == 0 ? this.total = res.total : this.tatal;
					this.reservationList = res.rows.reverse();
					console.log("total:==",this.total);
					console.log("reservationList:==",this.reservationList);
					
				}else{
					this.total == 0 ? this.total = mockReservationList().total : this.tatal;
					this.reservationList = mockReservationList().rows.reverse();
					console.log("total:==",this.total);
					console.log("reservationList:==",this.reservationList);
				}
			},
			async getReservationInfo(id){
				let res2 = await getReservation(id);
				console.log("res2:==>",res2);
				if(res2.code == 200){
					this.reservationInfo = res2.data;
					console.log("reservationInfo:==",this.reservationInfo);
				}else{
					this.reservationInfo = mockReservation().data;
				}
			},
			
			// 点击页码
			 change(nowPage) {
				 // console.log("子传父:",nowPage);
				this.nowPage = nowPage
				this.loadData({
					pageNum:nowPage,
					pageSize:10
				})
			}
		},
		
		onLoad() {
			this.loadData({
				pageNum:1,
				pageSize:10
			});
			
		}
	}
</script>

<style lang="scss" scoped>
	.infoBox,.warp{
		box-sizing: border-box;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.infoBox{
		width: 100%;
		height: 100%;
		position: fixed;
		padding: 100rpx 60rpx;
		background-color:rgba(128,128,128,.7);
		
	}
	.warp {
		width: 80%;
		height: 50%;
		padding: 30rpx;
		position: absolute;
		border-radius: 30rpx;
		background-color: rgba(2,189,173,1);
	}
	.warp .boos{
		margin-bottom: 20rpx;
	}
	.warp .orderNo .span2,.warp .userId .span2{
		color: #7100a9;
	}
	.warp .reserveTime .span2{
		color: #3afa00; 
	}
	.warp .money .span2{
		font-weight: 600;
		color: #ff0000;
	}
	
	.content{
		// padding: 40rpx 0
	}
	.reservationList{
		width: 100%;
		background-color: #f4f4f4;
		// padding: 20rpx 0;
		.foot{
			width: 100%;
			height: 20px;
			background-color: #f4f4f4;
		}
	}
	.reservationBox{
		width: 100%;
		margin: 10rpx 0;
		font-size: 16px;
		color: #555;
		line-height: 24px;
		background-color: #fff;
		box-sizing: border-box;
		padding: 20rpx;
		overflow: hidden;
	}
	.boos{
		display: flex;
		justify-content: space-around;
	}
	.reservationBox .orderNo .span2{
		color: #55aaff;
	}
	.reservationBox .money .span2{
		color: #ff5500;
	}
	.reservationBox .userId .span2{
		color: #1da2df;
	}
	.boos .span1{
		width: 30%;
		overflow: hidden;
	}
	.boos .span2{
		width: 70%;
		
		font-size: 18px;
		color: #000;
		white-space:nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.nowPage{
		box-sizing: border-box;
		padding-left: 20rpx;
	}
	
	
</style>

